<template lang="">
    <div style="width:100vw;">
        <!-- <div style="padding-top:40px;" class="record-header">
            <mt-header fixed title="个人档案">
                <router-link to="/" slot="left">
                    <mt-button class="back-butt" icon="back"></mt-button>
                </router-link>
            </mt-header>
        </div> -->
        <div class="record-body">
            <div class="record-banner">
              <div class="record1px flex-row">
                  <div class="record-user-detail shadow">
                    <div class="record-user">{{getFileDetails.username}}</div>
                    <div class="record-partment">{{getFileDetails.deptName}}</div>
                    <div class="record-post">
                      <span>{{getFileDetails.job}}</span>
                      <span class="personal-edition">个人版</span>
                    </div>
                  </div>
                  <div :style="`background-image:url(${photoShow || require('@/assets/homePicture/06.png')});`" style="position:relative;" class="record-user-picture">
                    <van-uploader class="file-input" :after-read="afterRead" />
                    <!-- <img :src="photoShow || require('@/assets/homePicture/06.png')" alt=""> -->
                  </div>
                </div>
            </div>
            <div class="record-detail">
              <div class="record-item flex-row">
                <label class="item-tip">
                  <span class="iconfont iconxingming init-icon"></span>姓名：
                </label>
                <span class="item-content">{{getFileDetails.username || '暂无'}}</span>
              </div>
              <div class="record-item flex-row">
                <label class="item-tip"><span class="iconfont iconmingpian1 init-icon"></span>部门：</label>
                <span class="item-content">{{getFileDetails.deptName || '暂无'}}</span>
              </div>
              <div class="record-item flex-row">
                <label class="item-tip"><span class="iconfont iconqiwangzhiwei init-icon"></span>岗位：</label>
                <span class="item-content">{{getFileDetails.job || '暂无'}}</span>
              </div>
              <div @click="goEducation" class="record-item flex-row">
                <label class="item-tip"><span class="iconfont iconweibiaoti-- init-icon"></span>学历：</label>
                <span class="item-content">
                  {{getFileDetails.eduKind || '暂无'}}
                  <span class="iconfont icongengduo"></span>
                </span>
              </div>
              <div @click="goGradedetails" class="record-item flex-row">
                <label class="item-tip"><span class="iconfont iconjixiaokaoping init-icon"></span>职级：</label>
                <span class="item-content">
                  {{getFileDetails.rankName || '暂无'}}
                  <span class="iconfont icongengduo"></span>
                </span>
              </div>
              <div class="record-item flex-row">
                <label class="item-tip"><span class="iconfont icondengdai init-icon"></span>滞留年次：</label>
                <span class="item-content">{{getFileDetails.detentionTime}} 年</span>
              </div>
            </div>
        </div>
    </div>
</template>
<script>
import {
  Indicator,
  Toast
} from 'mint-ui';
export default {
  name: "ownRecord",
  data() {
    return {
      msg: "msg",
      uploadFile: "",
      photoShow:'',
      getFileDetails: {}
    };
  },
  mounted() {
    let that = this;
    that.$get("getFileDetails").then(res => {
      if (res.success) {
        that.getFileDetails = res.data;
        that.photoShow = res.data.photo;
        for (var key in res.data) {
          if (key == "eduKind") {
            if (res.data[key] == 0) {
              res.data[key] = "大专";
            } else if (res.data[key] == 1) {
              res.data[key] = "本科";
            } else if (res.data[key] == 2) {
              res.data[key] = "硕士";
            } else if (res.data[key] == 3) {
              res.data[key] = "博士";
            }
          }
        }
      }
    });
  },
  methods: {
    afterRead(file){
      let that = this;
      that.uploadFile = file.file
      let formdata = new FormData();
      formdata.append('file',that.uploadFile)
      let config = {
        header: {
          "Content-Type": "mutipart/form-data"
        }
      };
      Indicator.open({
        text: '加载中...',
      });
      that.$http.post("/archives/picture", formdata, config).then(res => {
        if(res.data.success){
          Indicator.close();
          that.photoShow = res.data.data;
        }else{
          Indicator.close();
        }
      });
    },
    goEducation() {
      this.$router.push({ path: "/education" });
    },
    goPartment() {
      this.$router.push({ path: "/partment" });
    },
    goGradedetails() {
      this.$router.push({ path: "/gradedetails" });
    }
  }
};
</script>
<style lang="less" scoped>
@import url("~@/pagecss/ownRecord.less");
.init-icon {
  font-weight: 700;
  margin-right: 10px;
  color: #4787e3;
}
.file-input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 999;
}
</style>